<template>
  <div class="bg">
    <div class="login">
      <el-image style="width: 100px; height: 100px" :src="img"></el-image>
      <el-form ref="formRef" :rules="rules" :model="form">
        <el-form-item prop="name">
          <el-input
            clearable
            v-model="form.name"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input
            clearable
            v-model="form.pwd"
            prefix-icon="el-icon-s-opportunity"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit('formRef')" round
            >登录</el-button
          >
          <el-button type="info" @click="resetForm('formRef')" round
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import { login } from '@/api'
export default {
  data() {
    return {
      img: 'https://img2.baidu.com/it/u=4126472116,1552485291&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657213200&t=6444fb91614a98288e6bdf0946c29764',
      form: {
        name: 'admin',
        pwd: '',
      },
      rules: {
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { data: res } = await login(this.form)
          if (res.code == 1) {
            Message.success(res.msg)
            sessionStorage.setItem('token', res.token)
            this.$router.push('/')
          } else {
            Message.error(res.msg)
          }
        } else {
          Message.error('表单验证失败')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>
<style lang="scss" scoped>
.bg {
  height: 100%;
  width: 100%;
  background-image: url('@/assets/bg.gif');
  .login {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    top: 50%;
    width: 300px;
    height: 250px;
    border-radius: 10px;
    padding: 50px;
    position: relative;
    .el-form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .el-image {
      border-radius: 50%;
      position: absolute;
      top: -60px;
      left: 100px;
      z-index: 10;
    }
  }
}
</style>
